<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body{
            background: url(./images/bg.gif) center no-repeat ;
            background-size: 100% ;
        }
        #box {
            width: 1250px;
            height: 700px;
            margin: 0 auto;
            text-align: center;
            padding: 30px;
        }

        #box>img {
            width: 150px;
            height: 225px;
            padding: 2px;
        }
    </style>
</head>

<body>
    <div id="box"></div>
</body>

</html>
<script>
    var clickcount = 0;//记录点击的次数
    var firstcard = 0;//记录点击的第一张图像
    var secondcard = 0;//记录点击的第二张图像
    //图片路径放在imgs数组中
    var imgs = ["./images/h1.webp", "./images/h2.webp", "./images/h3.webp", "./images/h4.webp", "./images/h5.webp", "./images/h6.webp","./images/h7.webp","./images/h13.webp","./images/h9.webp","./images/h10.webp","./images/h11.webp","./images/h12.webp", "./images/h1.webp", "./images/h2.webp", "./images/h3.webp", "./images/h4.webp", "./images/h5.webp", "./images/h6.webp","./images/h7.webp","./images/h13.webp","./images/h9.webp","./images/h10.webp","./images/h11.webp","./images/h12.webp"];
    //所有的img标签开始的路径
    var cardBg = "./images/h8.webp ";
    //创建img数组,存储img标签
    var img = new Array();
    //取得最外层容器
    var box = document.getElementById("box");
    //打乱数组imgs中的顺序
    shuffle(imgs);
    //创建24个图像元素
    for (var i = 0; i < imgs.length; i++) {
        img[i] = document.createElement("img");//创建img标签放到img数组中
        img[i].src = cardBg;//所有的img标签开始的路径
        img[i].setAttribute("id", i);//给每个img标签增加一个属性id 属性值是0-23 相对应imgs的下标
        box.appendChild(img[i]);//吧img插入到第v中
        img[i].onclick = function () {//img标签的点击事件            
            changecard(this);
        }
    }
    //打乱数组中imgs的顺序
    function shuffle(arr) {
        for (var i = 0; i < imgs.length; i++) {//遍历数组
            var index = parseInt(Math.random() * imgs.length);//index  下标
            var tempImg = imgs[i];
            imgs[i] = imgs[index];//打乱图片路径
            imgs[index] = tempImg;
        }
        // console.log(arr)
        return arr;
    }
    //实现翻牌
    function changecard(e) {
        var id = e.getAttribute("id");//获取到img的id值
        if (clickcount === 0) {//判断点击的次数，第一次是0
            firstcard = id;//第一次点击的img的id值，记录点击的是第一张img
            img[firstcard].setAttribute("src", imgs[firstcard]);//给点击的img改变src属性值(相对应的imgs数组中的下标)
        }
        if (clickcount === 1) {//第二次点击
            secondcard = id;//第二次点击的img的id值，记录点击的是第二张img
            img[secondcard].setAttribute("src", imgs[secondcard]);//给点击的img改变src属性值(相对应的imgs数组中的下标)
            setTimeout(function () {
                if (imgs[firstcard] === imgs[secondcard] && firstcard !== secondcard) {//判断点击两次的img一样
                    img[firstcard].onclick = "";//移除单击事件
                    img[secondcard].onclick = "";//移除单击事件
                    //移除图像
                    box.removeChild(img[firstcard]);//删除第一次点击的图片
                    box.removeChild(img[secondcard]);//删除第二次点击的图片
                    var boxchild = box.childElementCount;//childElementCount 返回子元素个数
                    if (boxchild <= 0) {//判断div的子级个数
                        alert("游戏结束");
                    }
                }
                else {//判断点击两次的img不一样
                    img[firstcard].setAttribute("src", cardBg);//改变路径为原来的
                    img[secondcard].setAttribute("src", cardBg);//改变路径为原来的
                }
                firstcard = 0;
                secondcard = 0;
                clickcount = 0;
            }, 500);
        }
        clickcount++;
    }
    
</script>